<template>
  <div class="table-container"
       :style="height">
    <div class="header"
         :style="height1">
      <div v-for="(item, index) in headData"
           :key="index">{{ item }}</div>
    </div>
    <div class="content"
         ref="myleftdemo"
         @mouseover="datashubiao"
         @mouseout="mouseout1"
         :style="height2">
      <ul ref="mydemo1"
          class="mydemo1">
        <li v-for="(item, index) in tableData"
            :key="index"
            @click="onClick(item)">
          <div v-if="item.marketName"
               :title="item.marketName">
            {{ item.marketName }}
          </div>
          <!-- <div v-if="item.area"
               :title="item.area">
            {{ item.area }}
          </div> -->
          <div v-if="item.dishName">{{ item.dishName }}</div>
          <div v-if="item.salesVolume">{{ item.salesVolume }}</div>
          <div v-if="item.salesAmount">{{ item.salesAmount }}</div>
          <div v-if="item.purchaseQuantity">{{ item.purchaseQuantity }}</div>
          <div v-if="item.purchaseAmount">{{ item.purchaseAmount }}</div>

          <!-- <div>{{ item.number }}</div> -->
          <!-- <div>{{ item.way }}</div> -->
          <!-- <div>{{ item.result }}</div> -->

          <!-- <div v-if="item.upDown * 1 > 0" style="color:#F52438"><span>↑</span> {{ item.upDown }}%</div>
          <div v-else-if="item.upDown * 1 === 0" style="color:#F52438">{{ item.upDown }}%</div>
          <div v-else-if="item.upDown * 1 < 0" style="color:#2BBE42">
            <span>↓</span> {{ String(item.upDown).slice(1) }}%
          </div> -->
          <!-- <div v-else style="color:#F52438">
            0%
          </div> -->
        </li>
      </ul>
      <ul ref="mydemo2"
          class="mydemo2"
          v-if="tableData.length > 5"></ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    headData: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    height: {
      type: Object,
      default: () => ({})
    },
    height1: {
      type: Object,
      default: () => ({})
    },
    height2: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      scroll: -1, //定时器中使用。当表格滚动完了自动从第一条数据开始重复滚动
      speed: 50, //定时器执行时间间隔
      myInterval: '', //设置定时器
      dishNameL: ''
    };
  },
  //清除定时
  beforeDestroy () {
    clearInterval(this.myInterval);
  },
  created () {
  },
  mounted () {
    // this.init();
  },
  watch: {
    tableData: {
      handler (val, oldval) {
        console.log(val, oldval);
        // this.init();
      },
      deep: true
    }
  },
  methods: {
    // init () { 
    //   console.log('tableData', this.tableData)
    //   if (this.tableData.length <= 8) return;
    //   this.$refs.mydemo2.innerHTML = this.$refs.mydemo1.innerHTML;
    //   this.myInterval = setInterval(this.Marquee, this.speed); //设置定时器并赋值给myInterval
    // },
    // Marquee () {
    //   if (this.tableData.length <= 5) return;
    //   if (this.$refs.mydemo2.offsetTop <= this.$refs.myleftdemo.scrollTop) {
    //     this.$refs.myleftdemo.scrollTop -= this.$refs.mydemo1.offsetHeight;
    //   } else {
    //     if (this.scroll !== this.$refs.myleftdemo.scrollTop) {
    //       this.scroll = this.$refs.myleftdemo.scrollTop;
    //       this.$refs.myleftdemo.scrollTop++;
    //     } else {
    //       this.$refs.myleftdemo.scrollTop = 0;
    //       this.scroll = -1;
    //     }
    //   }
    // },
    // 回滚
    mouseout1 () {
      // this.myInterval = setInterval(this.Marquee, this.speed);
    },
    // 表格滚动开始
    datashubiao () {
      // clearInterval(this.myInterval);
    },
    onClick (e) {
      this.$emit('trading', e)
    }
  }
};
</script>

<style lang="scss" scoped>
.table-container {
  padding-top: 0.125rem;
  width: 100%;
  // height: 100%;
  margin: 0 auto;
  .header {
    width: 100%;
    height: 0.575rem;
    // line-height: .575rem;
    margin: 0 auto;
    // color: #00fbff;
    font-size: 0.175rem;
    display: flex;

    div {
      width: 33.33%;
      text-align: center;
      margin-bottom: 0.25rem;
      // line-height: 0.34875rem;

      &:last-child {
        // font-size: 0.117rem;
        // line-height: 0.34875rem;
        // text-align: left;
      }
    }
  }

  .content {
    width: 100%;
    // height: 80%;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    .mydemo1 {
      width: 100%;
      margin: 0 auto;

      li {
        width: 100%;
        height: 0.5rem;
        display: flex;
        line-height: 0.5rem;
        color: #666666;
        font-size: 0.175rem;
        &:nth-child(odd) {
          background: rgba(72, 126, 234, 0.1);
        }

        div {
          width: 33.33%;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    .mydemo2 {
      width: 100%;
      margin: 0 auto;

      li {
        width: 100%;
        height: 0.5rem;
        display: flex;
        line-height: 0.5rem;
        color: #666666;
        font-size: 0.175rem;

        &:nth-child(even) {
          background: rgba(72, 126, 234, 0.1);
        }

        div {
          width: 33.33%;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .act {
    padding-left: 5%;
  }
}
</style>